<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单盒布局</title>

	  <style>
	  .single-box {
    /* 内容区宽度 */
    width: 300px;
    /* 内容区高度 */
    height: 200px;
    /* 内边距，上下左右均为 20px */
    padding: 20px;
    /* 边框，宽度为 2px，实线，颜色为蓝色 */
    border: 2px solid blue;
    /* 外边距，上下为 50px，左右自动居中 */
    margin: 50px auto;
    /* 背景颜色 */
    background-color: #f0f0f0;
}

.single-box p {
    /* 文本颜色 */
    color: #333;
    /* 文本居中对齐 */
    text-align: center;
}
	  
	    </style>
</head>

<body>
    <div class="single-box">
        <p>这是一个基于盒模型的单盒布局示例。</p>
    </div>
</body>

</html>